import React from 'react';
import { withRouter } from 'react-router-dom';
import Topbar from '../../components/Topbar/Topbar';
import './Addconf.css'
class Addconf extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            userid:localStorage.getItem('userid'),
            username:localStorage.getItem('username'),
            userimage:localStorage.getItem('userimage')
        };
    }

    timeChange(e){
        this.setState({
            time:e.target.value
        })
    }
    localChange(e){
        this.setState({
            local:e.target.value
        })
    }
    telChange(e){
        this.setState({
            tel:e.target.value
        })
    }
    descriptionChange(e){
        this.setState({
            description:e.target.value
        })
    }
    hopeChange(e){
        this.setState({
            hope:e.target.value
        })
    }

    pushConfession(){
        const url="https://www.prebeauty.work/confession"
        const param={
            time:this.state.time,
            local:this.state.local,
            tel:this.state.tel,
            description:this.state.description,
            hope:this.state.hope,
            userid:this.state.userid,
            likesnum:0,
            remarksnum:0
        }

        fetch(url,{
            method:'POST',
            body:JSON.stringify(param),
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    console.log('发布成功！');
                    this.props.history.push('/Confession')
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    render() {
        return (
            <div className="Addconf">
                <Topbar name="再遇桃花" color="#CD8C95" />

                <label>相遇时间：</label><br />
                <input type="datetime" placeholder="年-月-日-时:分"
                onChange={this.timeChange.bind(this)}></input>

                <label>相遇地点：</label><br />
                <input type="text" placeholder="写下你们邂逅的地点"
                onChange={this.localChange.bind(this)}></input>

                <label>联系方式：</label><br />
                <input type="tel" placeholder="写下你的联系方式"
                onChange={this.telChange.bind(this)}></input>

                <label>心动描述：</label><br />
                <textarea 
                    className="description" 
                    placeholder="写下令你心动的描述"
                    onChange={this.descriptionChange.bind(this)}
                ></textarea>

                <label>再遇心愿：</label><br />
                <textarea 
                    className="hope" 
                    placeholder="写下你再次相遇的愿望吧"
                    onChange={this.hopeChange.bind(this)}
                ></textarea>

                <input 
                    className="btn" 
                    type="button" 
                    value="发布" 
                    onClick={this.pushConfession.bind(this)} 
                ></input>
            </div>
        );
    }
}

export default withRouter(Addconf);